<template>
	<view class="root">

		<view class="puzzleTitle">
			<view style="font-size: 1.2rem; font-weight: bold;">{{ puzzleData.puzzleName }}</view>
			<view>
				<text style="font-size: 0.85rem;">难度: </text>
				<uni-icons type="star-filled" size="0.85rem" color="white" v-for="i in puzzleData.star"
					:key="i"></uni-icons>
				<uni-icons type="star" size="0.85rem" color="white" v-for="i in 5 - puzzleData.star"
					:key="i"></uni-icons>
			</view>
		</view>

		<view v-if="puzzleData.puzzleContentDTO">

			<view class="puzzleContent">
				<image mode="aspectFit"
					v-if="puzzleData.puzzleContentDTO.media && puzzleData.puzzleContentDTO.media.startsWith('http')"
					:src="puzzleData.puzzleContentDTO.media"></image>
				<text class="puzzleText">{{ puzzleData.puzzleContentDTO.contentText }}</text>
			</view>

			<view class="answerContainer">

				<view class="answerSelect" v-if="[1, 2].includes(puzzleData.puzzleType)">
					<text v-if="puzzleData.puzzleType == 1">多选题</text>
					<text v-if="puzzleData.puzzleType == 2">单选题</text>

					<view v-for="(item, index) in puzzleData.optionList" :key="index"
						:class="{ selectedAnswer: answerSelect.includes(item.tbSelect) }"
						@click="toggleSelect(item.tbSelect)">
						<text>{{ item.tbSelect }}</text>
						<text>{{ item.selectContent }}</text>
					</view>
				</view>

				<view class="answerJudge" v-else-if="puzzleData.puzzleType == 3">
					<view :class="{ selectedAnswer: answerText == 'true' }" @click="answerText = 'true'">
						<u-icon name="checkmark-circle" color="white" size="2.5rem" label="对" labelPos="bottom"
							labelSize="1rem" labelColor="white"></u-icon>
					</view>
					<view :class="{ selectedAnswer: answerText == 'false' }" @click="answerText = 'false'">
						<u-icon name="close-circle" color="white" size="2.5rem" label="错" labelPos="bottom"
							labelSize="1rem" labelColor="white"></u-icon>
					</view>
				</view>

				<view class="answerInput" v-else>
					<text>输入答案:</text>
					<textarea v-model="answerText" />
				</view>

			</view>

			<text class="submitBtn" @click="checkAnswer">提交</text>

			<view class="clueBtn">
				<uni-icons type="help" size="1.2rem"></uni-icons>
				<text>提示</text>
				<view class="clue">{{ puzzleData.clue }}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getPuzzleMoreMsg,
		checkPuzzlePageAnswer,
	} from "@/config/api.js"

	import {
		addHistory
	} from "../../utils";

	export default {
		data() {
			return {
				id: -1,

				puzzleData: {
					"clue": "",
					"displayOrder": 0,
					"labelList": [{
						"labelName": "labelName"
					}],
					"optionList": [{
						"selectContent": "select A",
						"tbSelect": "A"
					}, {
						"selectContent": "selection B",
						"tbSelect": "B"
					}, {
						"selectContent": "C????",
						"tbSelect": "C"
					}, {
						"selectContent": "DDDDDDDDDDD",
						"tbSelect": "D"
					}, ],
					"puzzleAnswer": "",
					"puzzleContentDTO": {
						"contentText": "问题问题问题是？",
						"media": "-https://img.zcool.cn/community/0137825b6e509ea801215c8ff9ff52.jpg@2o.jpg"
					},
					"puzzleKinds": 0,
					"puzzleName": "谜题名称",
					"puzzleScore": 0,
					"puzzleType": 1,
					"star": 3,
					"userName": "userName"
				},
				puzzleData: {},

				answerText: '',
				answerSelect: [],

			};
		},
		onLoad(e) {
			this.id = e.id
		},
		mounted() {
			this.getPuzzle()
		},
		methods: {
			async getPuzzle() {
				var res = await getPuzzleMoreMsg(this.id)
				this.puzzleData = res

				addHistory(this.puzzleData.puzzleName, this.puzzleData.puzzleContentDTO.media)
			},

			toggleSelect(select) {
				if (this.puzzleData.puzzleType == 1) {
					if (this.answerSelect.includes(select)) {
						this.answerSelect.splice(this.answerSelect.indexOf(select), 1)
					} else {
						this.answerSelect.push(select)
					}
					this.answerSelect.sort()
				} else {
					this.answerSelect = [select]
				}
			},

			async checkAnswer() {
				if (this.puzzleData.puzzleType == 1) {
					var res = await checkPuzzlePageAnswer(this.id, JSON.stringify(this.answerSelect))
				} else if (this.puzzleData.puzzleType == 2) {
					var res = await checkPuzzlePageAnswer(this.id, this.answerSelect[0])
				} else {
					var res = await checkPuzzlePageAnswer(this.id, this.answerText)
				}
				if (res) {
					uni.showToast({
						title: '回答正确!',
						icon: 'success',
					});
				} else {
					uni.showToast({
						title: '回答错误!',
						icon: 'error',
					});
				}
			}
		}
	}
</script>

<style>
	.root {
		display: flex;
		flex-flow: column;
		width: 100%;
		height: 100%;
		background-image: url('http://haojiezhe12345.top:8090/miniprogram_static/puzzle_guess/bg.jpg');
		background-size: 100% 100%;
	}

	.puzzleTitle {
		margin: 1rem 0;
		padding: 0.3rem 1.2rem 0.3rem 2.3rem;
		transform: translateX(-2rem);
		border: 0.25rem solid #24a524;
		border-radius: 100rem;
		background-color: #4dcc6c;
		color: white;
		width: fit-content;
		box-shadow: 0 0 0.1rem 0rem rgba(0, 64, 0, 0.5);
	}

	.puzzleContent {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 65%;
		box-sizing: border-box;
		border: 0.3rem solid #c6ffc9;
		border-radius: 2rem;
		background: linear-gradient(to bottom, #61e981, #3cd05f);
		color: white;
		padding: 0.7rem;
		margin: 0.5rem auto 1rem;
		font-size: 1.2rem;
		box-shadow: 0 0.1rem 0.2rem 0rem rgba(0, 64, 0, 0.5);
	}

	.puzzleContent>image {
		width: 80%;
		height: 20vh;
		margin: 0.5rem 0;
	}

	.puzzleText {
		text-align: center;
	}

	.root>view:last-child {
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center;
		min-height: 0;
		overflow-y: auto;
	}

	.answerContainer {
		width: 80%;
		box-sizing: border-box;
		border: 0.3rem solid #c6ffc9;
		border-radius: 2rem;
		background: linear-gradient(to bottom, #66e484, #bbe292);
		margin: 0 auto;
		box-shadow: 0 0.1rem 0.3rem 0rem rgba(0, 64, 0, 0.5);
	}

	.answerContainer>view>text {
		color: white;
	}

	.answerSelect {
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: 8%;
		gap: 1rem;
	}

	.answerSelect>view {
		padding: 0.5rem 0.8rem;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 1.1rem;
	}

	.answerSelect>view.selectedAnswer {
		background-color: rgba(210, 255, 50, 0.8);
	}

	.answerSelect>view>text:first-child::after {
		content: '.';
		margin-right: 4px;
	}

	.answerInput {
		display: flex;
		flex-flow: column;
		padding: 8%;
		gap: 0.5rem;
	}

	.answerInput>textarea {
		width: 100%;
		height: 5rem;
		box-sizing: border-box;
		padding: 0.5rem;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 0.7rem;
		margin-bottom: 0.5rem;
	}

	.answerJudge {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 3%;
		gap: 1rem;
	}

	.answerJudge>view.selectedAnswer {
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 0.5rem;
	}

	.answerJudge>view {
		padding: 0.2rem;
	}

	.submitBtn {
		border: none;
		background: linear-gradient(#eeb26e, #f8893b);
		border-bottom: 0.25rem solid #b25113;
		color: white;
		font-size: 1.3rem;
		margin: 0.8rem auto;
		padding: 0.5rem 2rem;
		border-radius: 1rem;
		box-shadow: 0 0.1rem 0.1rem 0 #888;
	}

	.clueBtn {
		position: absolute;
		right: 1rem;
		bottom: 1.7rem;
		display: flex;
		align-items: flex-start;
		line-height: 1rem;
		border-bottom: 1px solid black;
		padding-right: 0.1rem;
		outline: none;
	}

	.clueBtn>uni-icons {
		transform: translateY(0.07rem);
	}

	.clueBtn>.clue {
		display: none;
		position: absolute;
		right: -0.5rem;
		bottom: 1.8rem;
		background-color: white;
		padding: 0.5rem 0.8rem;
		border-radius: 1rem;
		box-shadow: 0 0.05rem 0.3rem #888;
		width: max-content;
		max-width: 50vw;
	}

	.clueBtn>.clue::after {
		content: "";
		position: absolute;
		bottom: -0.6rem;
		right: 1rem;
		width: 0;
		height: 0;
		border-top: 0.6rem solid white;
		border-left: 0.5rem solid transparent;
		border-right: 0.5rem solid transparent;
	}

	.clueBtn:hover>.clue {
		display: block;
	}
</style>